<template>
  <div>
    <el-button type="primary" size="mini" round @click="dialogVisible = true">导入商品分类</el-button>
    <el-dialog
      title="导入商品分类excel文件"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="90%"
    >
      <div>
        <el-row>
          <el-button type="primary" @click="exportExcel" round>下载excel模板</el-button>

          <el-upload
            :show-file-list="false"
            action="#"
            :auto-upload="false"
            style="display: inline-block"
            accept=".xls, .xlsx"
            :on-change="handleChange"
          >
            <el-button type="primary" round>选择excel文件</el-button>
          </el-upload>
        </el-row>

        <div style="margin-top: 20px">
          <el-table
            ref="excelTable"
            :data="rowList"
            stripe
            style="width: 100%"
            max-height="800"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection" fixed width="50"></el-table-column>
            <el-table-column type="index" show-overflow-tooltip label="序号" fixed width="50"></el-table-column>
            <el-table-column prop="name" label="分类名称" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="parentName" label="上级分类名称" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.parentName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="分类描述" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.description" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" min-width="160">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.sort" :min="0" :max="10000" placeholder="请输入内容"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="logo" label="图片地址" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.logo" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="logo" width="80">
              <template slot-scope="scope">
                <el-image
                  v-show="scope.row.logo"
                  style="width: 50px; height: 50px;"
                  :src="scope.row.logo"
                  fit="fill"
                ></el-image>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button @click="deleteRow(scope.row, scope.$index)" type="text" size="small">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <span slot="footer">
        <el-button type="primary" :loading="btnFlag" round @click="submitInfo">确认导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { categoryImport as infoImport } from "@/api/goods/import_info";
import { getStore } from "@/util/store";

export default {
  name: "goodsCategoryImport",
  props: {
    inputShopId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data: function() {
    return {
      dialogVisible: false,
      closeFlag: false,
      btnFlag: false,
      // 行数据
      rowList: [{}],
      selectRowList: [],
      shopId: getStore({ name: "shopId" })
    };
  },
  created() {},
  computed: {},
  methods: {
    // 下载excel模板
    exportExcel() {
      window.open("/file/goods/商品分类导入模板.xlsx");
    },
    handleClose(done) {
      if (this.closeFlag) {
        this.$confirm("有未提交修改, 确认关闭?")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      } else {
        done();
      }
    },
    //删除
    deleteRow(row, index) {
      this.rowList.splice(index, 1);
      if (this.rowList.length === 0) {
        this.rowList.push({});
        this.closeFlag = false;
      }
    },
    // 多选
    selectionChange(list) {
      this.selectRowList = list;
    },
    // 全选
    selectAll() {
      this.$refs.excelTable.toggleAllSelection();
    },
    // 处理excel文件
    handleChange(file) {
      this.closeFlag = true;
      this.selectRowList = [];
      let name = file.name;
      let type = name.substring(name.lastIndexOf(".")).toLowerCase();
      if (!(type === ".xls" || type === ".xlsx")) {
        this.$notify({
          title: "提示",
          message: "请选择Excel文件"
        });
        return;
      }
      // 表头 属性转换
      this.$export.xlsx(file.raw).then(data => {
        this.rowList = data.results.map(item => {
          return {
            name: item["分类名称"],
            parentName: item["上级分类名称"],
            description: item["分类描述"],
            sort: item["排序"],
            logo: item["图片地址"]
          };
        });
        // 全选
        this.selectAll();
      });
    },
    // 提交导入信息
    submitInfo() {
      if (this.selectRowList.length) {
        this.btnFlag = true;
        infoImport({
          categoryList: this.selectRowList,
          shopId: this.inputShopId || this.shopId
        })
          .then(res => {
            this.$notify({
              title: "导入结果提示",
              dangerouslyUseHTMLString: true,
              message: res.data.data.replace(/[|]/g, "<br/>"),
              duration: 50000
            });
            this.closeFlag = false;
          })
          .catch(err => {
            this.$notify({
              title: "错误提示",
              message: err,
              duration: 50000
            });
          })
          .finally(() => {
            this.btnFlag = false;
          });
      } else {
        this.$notify({
          title: "导入提示",
          message: "请选择需导入的明细信息"
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
</style>
